<template>
  <div class="editContainer" v-if="isShow">
    <div class="edit" >
      <div class="edit-top">
        <div class="block avatar"><el-avatar shape="square" :size="50"></el-avatar><div class="username">{{this.userInfo.name}}</div></div>
      </div>
      <div style="margin: 10px;"></div>
      <form class="form" :userInfo="userInfo">
        <div class="form-item">
          <label class="form-item_label" style="width: 80px" >性别</label>
          <div class="form-item_content" style="margin-left: 80px;">
            <div class="input">
              <input type="text" autocomplete="off" class="input_inner" :disabled="disabledInput" v-model="userInfo.sex">
            </div>
          </div>
        </div>
        <div class="form-item">
          <label class="form-item_label" style="width: 80px">年龄</label>
          <div class="form-item_content" style="margin-left: 80px;">
            <div class="input">
              <input type="text" autocomplete="off" class="input_inner" :disabled="disabledInput" v-model="userInfo.age">
            </div>
          </div>
        </div>
        <div class="form-item">
          <label class="form-item_label" style="width: 80px">电话</label>
          <div class="form-item_content" style="margin-left: 80px;">
            <div class="input">
              <input type="text" autocomplete="off" class="input_inner" :disabled="disabledInput" v-model="userInfo.phone">
            </div>
          </div>
        </div>
        <div class="form-item">
          <label class="form-item_label" style="width: 80px">微信</label>
          <div class="form-item_content" style="margin-left: 80px;">
            <div class="input">
              <input type="text" autocomplete="off" class="input_inner" :disabled="disabledInput" v-model="userInfo.wechat">
            </div>
          </div>
        </div>
        <div class="form-item">
          <label class="form-item_label" style="width: 80px">部门</label>
          <div class="form-item_content" style="margin-left: 80px;">
            <div class="input">
              <input type="text" autocomplete="off" class="input_inner" :disabled="disabledInput" v-model="userInfo.department1">
            </div>
          </div>
        </div>
        <div class="form-item">
          <label class="form-item_label" style="width: 80px">职位</label>
          <div class="form-item_content" style="margin-left: 80px;">
            <div class="input">
              <input type="text" autocomplete="off" class="input_inner" :disabled="disabledInput" v-model="userInfo.position">
            </div>
          </div>
        </div>
        <div class="form-item">
          <label class="form-item_label" style="width: 80px">证件类型</label>
          <div class="form-item_content" style="margin-left: 80px;">
            <div class="input">
              <input type="text" autocomplete="off" class="input_inner" :disabled="disabledInput" v-model="userInfo.cardType">
            </div>
          </div>
        </div>
        <div class="form-item">
          <label class="form-item_label" style="width: 80px">证件号码</label>
          <div class="form-item_content" style="margin-left: 80px;">
            <div class="input">
              <input type="text" autocomplete="off" class="input_inner" :disabled="disabledInput" v-model="userInfo.cardNo">
            </div>
          </div>
        </div>
        <div class="form-item">
          <label class="form-item_label" style="width: 80px">家庭电话</label>
          <div class="form-item_content" style="margin-left: 80px;">
            <div class="input">
              <input type="text" autocomplete="off" class="input_inner" :disabled="disabledInput" v-model="userInfo.homePhone">
            </div>
          </div>
        </div>
        <div class="form-item">
          <label class="form-item_label" style="width: 80px">住址</label>
          <div class="form-item_content" style="margin-left: 80px;">
            <div class="input">
              <input type="text" autocomplete="off" class="input_inner" :disabled="disabledInput" v-model="userInfo.address">
            </div>
          </div>
        </div>
      </form>
      <div class="edit-icon" ><el-button :class="{btncolor: btnshow}" icon="el-icon-edit" circle @click="editBtn"></el-button></div>
      <div class="edit-close" @click="isShow =!isShow"><i class="el-icon-close close-icon" ></i></div>
    </div>
  </div>
</template>

<script>
import { editUserLoginInfo } from 'network/edit'

export default {
  name: 'Edit',
  data() {
    return {
      message: null,
      disabledInput: true,
      isShow: false,
      btnshow: false,
    }
  },
  props: {
    userInfo:{
      typeof: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    editBtn() {
      // console.log(this.userInfo.name);
      console.log(this.userInfo);
      this.disabledInput = !this.disabledInput
      this.btnshow = !this.btnshow
      if(this.disabledInput) {
        editUserLoginInfo(this.userInfo).then( res => {
        console.log(res);
        })
      }
    }
  },
  computed: {
    
  }
   
}
</script>

<style  scoped>
.editContainer {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, .3);
  }
  .edit {
  position: absolute;
  width: 360px;
  height: 620px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #fff;
}
.edit-top {
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #289edb;
  text-align: center;
}
.avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.form {
  display: block;
  margin-top: 0em;
}
.form-item {
  margin-bottom: 5px;
}
.form-item::after, .form-item::before {
  display: table;
  content: "";
}
.form-item::after {
  clear: both
}
.form-item_label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 4px 0 0;
  box-sizing: border-box;
}
.form-item_content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
}
.input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 90%;
}
.input_inner {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 28px;
  line-height: 28px;
  outline: 0;
  padding: 0 12px;
  width: 80%;
}
.edit-icon {
  position: absolute;
  right: 10px;
  top: 130px;
}
.btncolor {
  color: #fff;
  border: #409eff;
  background-color: #409eff;
}
.edit-close {
  position: absolute;
  color: #fff;
  right: 0;
  top: 0;
}
.close-icon {
  display: block;
  font-size: 20px;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
</style>